<template>
  <el-dialog v-model="dialogVisible" title="商品" width="60%" :before-close="handleClose">
    <div style="color: red; font-size: 12px; margin-bottom: 10px">
      * 一次只允许添加一种商品!
    </div>
    <div class="oppo-goods-dialog">
      <el-form inline>
        <el-form-item label="商品名称">
          <el-input style="width: 220px" v-model="searchForm.name" clearable placeholder="商品名称" />
        </el-form-item>
        <el-form-item label="商品分类">
          <el-tree-select style="width: 220px" default-expand-all node-key="id" filterable v-model="searchForm.cateid"
            :data="classOptions" check-strictly clearable :render-after-expand="false" :props="{
              label: 'name',
              children: 'sub',
            }" placeholder="分类">
          </el-tree-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchFun">查询</el-button>
        </el-form-item>
      </el-form>

      <el-table v-loading="loading" @selection-change="handleSelectionChange" :data="tableData" border max-height="550"
        style="width: 100%">
        <el-table-column prop="date" label="商品名称">
          <template #default="{ row }">
            <div class="manage-info">
              <el-image :preview-teleported="true" style="width: 50px; min-width: 50px; height: 50px" :src="row.cover"
                :zoom-rate="1.2" :preview-src-list="[row.cover]" :initial-index="4" fit="cover" class="img-box" />
              <div class="right">
                <div>
                  <label>商品名称：</label>
                  <span>{{ row.goods_name }} </span>
                </div>
                <div>
                  <label>商品编号：</label>
                  <span>{{ row.goods_code }} </span>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="goods_spec" label="规格" />
        <el-table-column prop="price_selling" label="原销售价(元)" />
        <el-table-column label="数量">
          <template #default="{ row }">
            <el-input placeholder="数量" v-model="row.count" />
          </template>
        </el-table-column>
        <el-table-column label="售价(元)">
          <template #default="{ row }">
            <el-input placeholder="售价" v-model="row.discount_amount" />
          </template>
        </el-table-column>
        <el-table-column width="100" align="center" label="选择商品">
          <template #default="{ row }">
            <el-button type="primary" link @click="submit(row)">选择商品</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
        <!-- <el-button
          type="primary"
          @click="submit"
          :disabled="selectGoods.length !== 1"
        >
          确认
        </el-button> -->
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { skuApi as listApi } from "@/plugins/api/shopping/manage";
import { listApi as classApi } from "@/plugins/api/shopping/class";
import { addGoodsApi } from "@/plugins/api/customer/manage/tab4.js";
let props = defineProps({
  dataInfo: {
    type: Object,
    default: {},
  },
});
let searchForm = ref({});
let selectGoods = ref([]);
function handleSelectionChange(arr) {
  selectGoods.value = [...arr];
  console.log(arr);
}
let dialogVisible = ref(false);
function handleClose(done) {
  ElMessageBox.confirm("是否确定关闭此对话框?")
    .then(() => {
      done();
    })
    .catch(() => { });
}
let ruleForm = ref({});
function initFun(row) {
  ruleForm.value = {};
  ruleForm.value.order_no = row.order_no;
  searchForm.value = {};
  selectGoods.value = [];

  dialogVisible.value = true;
  getData();
  getClass();
}
const emit = defineEmits(["selectGoodsFun"]);
function submit(row) {
  //   if (selectGoods.value.length !== 1)
  //     return ElMessage.warning("请按要求选择商品！");
  if (!row.count && !row.discount_amount)
    return ElMessage.warning("请填写商品数量和价格！");
  let obj = {};
  obj.goods_code = row.goods_code;
  obj.sku_id = row.id;
  obj.count = row.count;
  obj.discount_amount = row.discount_amount;
  obj.order_no = ruleForm.value.order_no;
  addGoodsApi(obj).then(() => {
    ElMessage.success("添加成功！");
    emit("refreshList");
    dialogVisible.value = false;
  });
}

//
const currentPage = ref(1);
const pageSize = ref(20);
const total = ref(0);
function searchFun() {
  currentPage.value = 1;
  selectGoods.value = [];
  tableData.value = [];
  getData();
}
const handleSizeChange = (val) => {
  pageSize.value = val;
  selectGoods.value = [];
  getData();
};
const handleCurrentChange = (val) => {
  currentPage.value = val;
  selectGoods.value = [];
  getData();
};
let tableData = ref([]);
let loading = ref(false);
function getData() {
  loading.value = true;
  listApi({
    page: currentPage.value,
    pageSize: pageSize.value,
    name: searchForm.value.name,
    cateid: searchForm.value.cateid,
  })
    .then((res) => {
      tableData.value = res.map((item) => {
        item.checked = false;
        return item;
      });
      // total.value = res.page.total;
      loading.value = false;
    })
    .catch(() => {
      loading.value = false;
    });
}

// 分类名称
let classOptions = ref([]);
function getClass() {
  classApi({}).then((data) => {
    classOptions.value = data;
  });
}
//
function checkboxSelectGoods(row) {
  tableData.value.forEach((item) => {
    if (item.id !== row.id) {
      row.checked = !row.checked;
    }
  });
}
//
onMounted(() => { });
defineExpose({
  initFun,
});
</script>
<style scoped lang="scss">
.oppo-goods-dialog {
  .manage-info {
    display: flex;

    .img-box {
      align-self: center;
    }

    .right {
      align-self: center;
      font-size: 12px;
      margin-left: 5px;
      color: #407dcd;
    }
  }
}
</style>
